<template>
  <div class="center_panel">
    <!-- <yanyanVideo :src="src" :videoTitle="'芜湖起飞'" ref="V" /> -->
    <!-- <div @click="changeSRC(src1)">横屏测试</div>
    <div @click="changeSRC(src2)">竖屏测试</div> -->
    <!-- <div @click="falldown">跳转</div> -->
    <CommentBox />
    <dir class="card_list">
      <!-- 动态水平滑动表 -->
      <ConditionSwiper @getActive="getActive" />
      <div class="feed_card">
        <!-- 分类tab -->
        <Tab @getActive="getTabActive" />
        <!-- 动态列表 -->
        <div class="content">
          <div class="new_notice_bar pointer" v-show="false">
            <p class="message">有新动态，点击查看</p>
            <!-- <p class="message">正在加载中</p> -->
          </div>
          <div v-for="content in conditionList" :key="content.id">
            <Card :content="content" />
          </div>
        </div>
      </div>
    </dir>
  </div>
</template>

<script>
// import yanyanVideo from "@/components/yanyan_video";
import CommentBox from "./component/commentBox";
import ConditionSwiper from "./component/conditionSwiper";
import Tab from "./component/tab";
import Card from "./component/card";
export default {
  data() {
    return {
      src: "https://image.gdhyl.com/file/news/2021/12/14/d8ff3059f33b4cfdb807314e0df93d3c0dlbna9s02.mp4",
      // src2: "https://image.gdhyl.com/file/news/2021/12/17/b8a2d2a3649647e280867f766488760b17t4lxzswj.mp4",
      // src: "",
      conditionList: [
        {
          id: "001", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "img", //动态类型-图片；转发、直播、视频
          publishDate: "2022-01-14 10:56:20", //发布时间
          content:
            "吼吼，那么再靠近点吧<br/>吼吼，那么再靠近点吧<br/>吼吼，那么再靠近点吧<br/>吼吼，那么再靠近点吧<br/><br/>吼吼，那么再靠近点吧<img src='/static/video/doge.png' alt='[doge]' style='margin: -1px 1px 0px; display: inline-block; width: 20px; height: 20px; vertical-align: text-bottom;'><br/>吼吼，那么再靠近点吧吼吼，那么再靠近点吧<br/>那么再靠近点吧<br/><br/>", //动态文本内容
          imgList: [
            "/static/video/img1.webp",
            "/static/video/img3.webp",
            "/static/video/img2.webp",
          ], //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "002", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "post", //动态类型-转发；图片、转发、直播、投稿视频
          publishDate: "2022-01-14 10:56:20", //发布时间
          content: `转发动态 //<a class='dynamic_link hover_bg' style='cursor: pointer; color: #178bcf'
          >@yoo一凡</a'>`, //动态文本内容
          postContent: {
            upInfo: {
              avatar: "/static/video/avatar.webp",
              uid: "140686110",
              uname: "言言_Official",
            },
            tip: "img", //原动态类型(text动态，img图片，video投稿视频，live直播间)
            content:
              "吼吼，那么再靠近点吧<br/>吼吼，那么再靠近点吧<br/>吼吼，那么再靠近点吧<br/>吼吼，那么再靠近点吧<br/><br/>吼吼，那么再靠近点吧<img src='/static/video/doge.png' alt='[doge]' style='margin: -1px 1px 0px; display: inline-block; width: 20px; height: 20px; vertical-align: text-bottom;'><br/>吼吼，那么再靠近点吧吼吼，那么再靠近点吧<br/>那么再靠近点吧<br/><br/>",
            imgList: [
              "/static/video/img1.webp",
              "/static/video/img3.webp",
              "/static/video/img2.webp",
            ], //动态图片列表,
          }, //转发内容
          imgList: null, //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "003", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: true, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "live", //动态类型-普通；转发、直播、视频
          liveMsg: {
            title: "B限突击!!!",
            type: "虚拟主播",
            viewNum: 201020,
            livelink: "", //直播间地址
            poster: "/static/video/live_bg.webp", //封面
            status: "ing", //直播状态：直播中，结束end
          },
          publishDate: "2022-01-14 10:56:20", //发布时间
          content: "", //动态文本内容
          imgList: [], //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "004", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: true, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "post", //动态类型-普通；转发、直播、视频
          publishDate: "2022-01-14 10:56:20", //发布时间
          content: "转发内容", //动态文本内容
          postContent: {
            upInfo: {
              avatar: "/static/video/avatar.webp",
              uid: "140686110",
              uname: "言言_Official",
            },
            tip: "live", //原动态类型(text动态，img图片，video投稿视频，live直播间)
            content: "直播开始啦",
            liveMsg: {
              title: "B限突击!!!",
              type: "虚拟主播",
              viewNum: 201020,
              livelink: "", //直播间地址
              poster: "/static/video/live_bg.webp", //封面
              status: "ing", //直播状态：直播中，结束end
            },
            imgList: null,
          }, //转发内容
          imgList: null,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "005", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "video", //动态类型-普通；转发、直播、视频
          publishDate: "2022-02-18 11:47:20", //发布时间
          content: "投稿视频", //动态文本内容
          videoMsg: {
            title: "【铅笔画】3美元与60美元画笔有什么区别？？", //视频标题
            content: `https://www.youtube.com/watch?v=pVCANz_WoAI @Kirsty
            PartridgeArt，看谁以后画不好画还怪材料！加入21天画手养成计划，瓜分万元奖金，21天每天陪练，挑战鸭等你http://n0i.cn/14eK9M`, //视频简介
            viewNum: 102, //观看人数
            danmuNum: 3, //弹幕数量
            cover: "/static/video/video_cover.webp", //封面
            previewPic: "/static/video/video_preview.jpg", //预览图片
            time: "00:40", //视频时间
            seeLater: false, //添加稍后看
            danmuList: ["太强了~", "芜湖~", "好看！！！", "确实", "哈哈哈"],
          }, //视频内容
          imgList: [], //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "006", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "post", //动态类型-普通；转发、直播、视频
          publishDate: "2022-02-18 11:47:20", //发布时间
          content: "转发内容", //动态文本内容
          postContent: {
            upInfo: {
              avatar: "/static/video/avatar.webp",
              uid: "140686110",
              uname: "言言_Official",
            },
            tip: "video", //原动态类型(text动态，img图片，video投稿视频，live直播间)
            content: "投稿视频",
            videoMsg: {
              title: "【铅笔画】3美元与60美元画笔有什么区别？？", //视频标题
              content: `https://www.youtube.com/watch?v=pVCANz_WoAI @Kirsty
            PartridgeArt，看谁以后画不好画还怪材料！加入21天画手养成计划，瓜分万元奖金，21天每天陪练，挑战鸭等你http://n0i.cn/14eK9M`, //视频简介
              viewNum: 102, //观看人数
              danmuNum: 3, //弹幕数量
              cover: "/static/video/video_cover.webp", //封面
              previewPic: "/static/video/video_preview.jpg", //预览图片
              time: "00:40", //视频时间
              seeLater: false, //添加稍后看
              danmuList: ["太强了~", "芜湖~", "好看！！！", "确实", "哈哈哈"],
            }, //视频内容
            imgList: null,
          }, //转发内容
          imgList: null, //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "007", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "artical", //动态类型-普通；转发、直播、视频、专栏
          publishDate: "2022-02-18 11:47:20", //发布时间
          content: null, //动态文本内容
          articalMsg: {
            title: "最近拍的 #胶片 汇总 拍拍猫猫 拍拍花花草草", //专栏标题
            content: `~喜欢拍拍猫猫 猫猫 猫猫 ~机器:  canon T70 ,  Mamiya645 1000s , canon EF胶片:  Portra160 , Portra400 ,  5207镜头:  mamiya 80/1.9 n , nfd 50/1.2 , nfd 200/2.8 , fd 50/1.4 ssc , fd 100/2.8 ssc  m645s+80/1.9:50/1.4:200/2.8用到的镜头和机器:总结来说:多拍猫猫 多锻炼防止手抖 该去画画了 咕咕咕咕 咕咕咕 咕`, //专栏内容
            covers: [
              "/static/video/artical_cover1.webp",
              "/static/video/artical_cover2.webp",
              "/static/video/artical_cover3.webp",
            ], //封面
          }, //文章内容
          imgList: null, //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "008", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "post", //动态类型-普通；转发、直播、视频
          publishDate: "2022-02-18 11:47:20", //发布时间
          content: "转发内容", //动态文本内容
          postContent: {
            upInfo: {
              avatar: "/static/video/avatar.webp",
              uid: "140686110",
              uname: "言言_Official",
            },
            tip: "artical", //原动态类型(text动态，img图片，video投稿视频，live直播间，artical文章)
            content: null,
            articalMsg: {
              title: "最近拍的 #胶片 汇总 拍拍猫猫 拍拍花花草草", //专栏标题
              content: `~喜欢拍拍猫猫 猫猫 猫猫 ~机器:  canon T70 ,  Mamiya645 1000s , canon EF胶片:  Portra160 , Portra400 ,  5207镜头:  mamiya 80/1.9 n , nfd 50/1.2 , nfd 200/2.8 , fd 50/1.4 ssc , fd 100/2.8 ssc  m645s+80/1.9:50/1.4:200/2.8用到的镜头和机器:总结来说:多拍猫猫 多锻炼防止手抖 该去画画了 咕咕咕咕 咕咕咕 咕`, //专栏内容
              covers: [
                "/static/video/artical_cover1.webp",
                "/static/video/artical_cover2.webp",
                "/static/video/artical_cover3.webp",
              ], //封面
            }, //文章内容
          }, //转发内容
          imgList: null, //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "009", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "text", //动态类型-普通；转发、直播、视频、专栏
          publishDate: "2022-02-18 11:47:20", //发布时间
          content:
            "我发起了一个投票​在植2的众多模式中，你最喜欢/最侧重的是哪一个？", //动态文本内容
          voteMsg: {
            title: "在植2的众多模式中，你最喜欢/最侧重的是哪一个？",
            members: 334, //目前参与人数
            voteId: "001", //投票id
          },
          imgList: null, //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
        {
          id: "010", //动态id
          //动态发布人信息
          uname: "言言_Official",
          uid: "01048923",
          avatar: "/static/video/avatar.webp", //头像
          avatar_pendent: "/static/video/avatar_pendent.webp", //头像外框
          vip: false, //会员
          attestation: "", //认证类型//mechanism机构认证；individual个人认证
          decorator: {
            title: "小希小桃",
            imgUrl: "/static/video/小希小桃.png",
          },
          type: "post", //动态类型-普通；转发、直播、视频
          publishDate: "2022-02-18 11:47:20", //发布时间
          content: "转发内容", //动态文本内容
          postContent: {
            upInfo: {
              avatar: "/static/video/avatar.webp",
              uid: "140686110",
              uname: "言言_Official",
            },
            tip: "text", //原动态类型(text动态，img图片，video投稿视频，live直播间，artical文章)
            content:
              "我发起了一个投票​在植2的众多模式中，你最喜欢/最侧重的是哪一个？", //动态文本内容
            voteMsg: {
              title: "在植2的众多模式中，你最喜欢/最侧重的是哪一个？",
              members: 334, //目前参与人数
              voteId: "001", //投票id
            },
          }, //转发内容
          imgList: null, //动态图片列表,
          status: {
            retraNum: 0, //动态转发量
            commNum: 0, //动态评论量
            likeNum: 0, //点赞数
          },
        },
      ],
    };
  },
  methods: {
    changeSRC(src) {
      this.src = src;
    },
    falldown() {
      this.$refs.V.falldownByTime("00:11");
    },
    getActive(msg) {
      //可获取当前点击目标信息
      // console.log(msg);
    },
    getTabActive(msg) {
      // console.log(msg)
    },
  },
  components: {
    // yanyanVideo,
    CommentBox,
    ConditionSwiper,
    Tab,
    Card,
  },
};
</script>

<style lang="scss">
page {
  background-image: linear-gradient(rgb(156, 198, 242), rgb(207, 231, 250));
  font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
    Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
.center_panel {
  width: 632px;
  margin: 0 8px;
}
.card_list {
  margin-top: 8px;
}
.feed_card {
  font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
    Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
  font-size: 14px;
  width: 100%;
  min-width: 632px;
  box-sizing: border-box;
}
</style>